<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>fxDialog Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</head>

<body>
<div class="container">
	<div class="m-2"></div>
	<button class="btn btn-primary" type="button" id="show">Form</button>	
	<button class="btn btn-primary" type="button" id="show2">Change Body</button>
	<button class="btn btn-danger" type="button" id="hide">Hide Dialog</button>
	&nbsp;
	<button class="btn btn-primary" type="button" id="show3">Custom Button</button>
	<button class="btn btn-primary" type="button" id="show4">No Footer</button>
	<button class="btn btn-primary" type="button" id="show5">No Header</button>
	&nbsp;
	<button class="btn btn-primary" type="button" id="stateEvent">State Event</button>
	<button class="btn btn-primary" type="button" id="btEvent">Button Events</button>
	<button class="btn btn-primary" type="button" id="show6">More...</button>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="src/fxdialog.js"></script>
<script>
var html =  '<form>';
html += '  <div class="form-group">';
html += '    <label for="exampleInputEmail1">Email address</label>';
html += '    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">';
html += '    <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>';
html += '  </div>';
html += '  <div class="form-group">';
html += '    <label for="exampleInputPassword1">Password</label>';
html += '    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">';
html += '  </div>';
html += '  <div class="form-check">';
html += '    <input type="checkbox" class="form-check-input" id="exampleCheck1">';
html += '    <label class="form-check-label" for="exampleCheck1">Check me out</label>';
html += '  </div>';
html += '</form>';

function hello(e) {
	console.log(e);
	alert('通过设置按钮的Action属性来响应按钮点击事件');
}

var option = {
	width: 800,
	buttons: [ {
		name: "button",
		id: "btn-button",
		cssClass: "btn btn-primary",
		title: "Button",
		action: hello
		}
	]
};

var dialog = $.fxDialog(html, '标题', {width: 800}, function(e) {
	alert(e.target.name + ' 通过回调方法响应对话框中按钮的点击事件');
});

var dialog3 = $.fxDialog('我的未来不是梦', '标题', option);

var dialog4 = $.fxDialog('<img src="http://img1.imgtn.bdimg.com/it/u=3142649127,1601665910&fm=26&gp=0.jpg" width="300" height="300">', '没有底部托盘的对话框', {showFooter: false});

var dialog5 = $.fxDialog('<img src="http://img1.imgtn.bdimg.com/it/u=3142649127,1601665910&fm=26&gp=0.jpg" width="300" height="300">', '没有顶部标题栏的对话框', {showHeader: false});

var stateEvent = $.fxDialog('处理状态事件，还支持更多事件......', '状态事件');
stateEvent.on("show", function(e) {
	alert('[打开]对话框事件触发')
});
stateEvent.on("show", function(e) {
	alert('[打开]对话框事件触发,一个事件支持响应多个操作')
});

stateEvent.on("close", function(e) {
	alert('[关闭]对话框事件触发')
});

var btOption = {
	width: 400,
	buttons: [ {
		name: "button",
		id: "btn-button",
		cssClass: "btn btn-primary",
		title: "Button",
		events: [
			{name:"click", handler: function() {
					alert('单击按钮事件响应');
				}
			}, 
			{name:"mouseout", handler: function() {
					alert('鼠标从按钮上移开事件响应');
				}
			}
		]
	}]
};

var btEvent = $.fxDialog('处理按钮事件，还支持更多事件......', '按钮事件', btOption);

$('#show').click(function(){	
	dialog.show();
});

$('#hide').click(function(){	
	dialog.hide();
});

$('#show2').click(function(){	
	dialog.show('谢谢您的参与', '提示');
});

$('#show3').click(function(){	
	dialog3.show();
});

$('#show4').click(function(){	
	dialog4.show();
});

$('#show5').click(function(){	
	dialog5.show();
});

$('#stateEvent').click(function(){	
	stateEvent.show();
});

$('#btEvent').click(function(){	
	btEvent.show();
});
</script>
</body>
</html>
